<template>
    <div>
        <div class="module-list">
            <ul>
                <li v-for="(item, i) in moduleList" :key="i" class="flex-column flex-center" @mousedown="dragHandle($event, item)">
                    <img :src="moduleIcon[item.moduleCode]">
                    <span>{{item.moduleName}}</span>
                </li>
            </ul>
        </div>

        <div v-if="addModule" class="module-drag flex-column flex-center" :style="{'left': addModule.x + 'px', 'top': addModule.y + 'px'}">
            <img :src="moduleIcon[addModule.moduleCode]">
            <span>{{addModule.moduleName}}</span>
        </div>

        <div class="page-tool flex-between-center">
            <a-button @click="editHandle('background')">页面背景</a-button>
            <a-button type="primary" @click="publishHandle">发布</a-button>
        </div>

        <div ref="preview" class="preview" :style="{'background-color': backgroundConfig.bgColor}">
            <div v-for="(module, i) in moduleData" :key="module.id" ref="module" class="module-box" @dblclick="editHandle(module)">
                <div v-if="module.moduleCode == 'BANNER'">
                    <div class="module-banner" :style="{'background-image': `url(${module.moduleContent.image_path})`}">
                        <div class="module-banner-rule flex-center" :style="{'color': module.moduleContent.text_color, 'background': module.moduleContent.button_color}">活动规则</div>
                        <div class="module-banner-account flex-between-center" :style="{'color': module.moduleContent.account_text_color}">
                            <div class="module-banner-account-background" :style="{'background-color': module.moduleContent.account_background}"></div>
                            <div style="position: relative;">
                                <div class="module-banner-account-title">挚友亲密值</div>
                                <div class="module-banner-account-value flex-end-cross">
                                    <span>7500</span>
                                    <img src="https://picttype1.jnby.com/less20th/heart.png">
                                </div>
                            </div>
                            <div class="module-banner-account-link" style="position: relative;">累积明细 ></div>
                        </div>
                    </div>
                </div>

                <div v-else-if="module.moduleCode == 'IMAGE'">
                    <div class="module-image">
                        <img :src="module.moduleContent.image_path || ''">
                    </div>
                </div>

                <div v-else-if="module.moduleCode == 'COUPON'">
                    <div class="module-coupon" :style="{'background': module.moduleContent.card_color}">
                        <div v-if="!module.moduleContent.activity" class="module-coupon-empty">请选择关联活动</div>
                        <div v-else>
                            <div class="module-coupon-head flex-between-center">
                                <div class="module-coupon-limit">
                                    <span v-if="module.moduleContent.activity">亲密值 ≥{{module.moduleContent.activity.closeValueFloor}}</span>
                                    <span>已解锁</span>
                                </div>
                                <div class="module-coupon-draw flex-center" :style="{'color': module.moduleContent.text_color, 'background': module.moduleContent.button_color}">点击领取</div>
                            </div>

                            <div v-if="module.moduleContent.activity" class="module-coupon-main">
                                <div v-for="(item, j) in module.moduleContent.activity.couponList" :key="j" class="module-coupon-item flex-center">
                                    <div class="module-coupon-item-main flex-grow">
                                        <div class="module-coupon-item-text">{{item.description}}</div>
                                        <div class="module-coupon-item-limit">{{item.vouName}}</div>
                                    </div>
                                    <div class="module-coupon-item-sum">￥<span>{{item.amtAcount}}</span></div>
                                </div>
                            </div>

                            <div v-if="module.moduleContent.activity" class="module-coupon-nav flex-center">
                                <div v-for="(item, j) in module.moduleContent.activity.couponList" :key="j" class="module-coupon-nav-item" :class="{'z-crt': j == 0}"></div>
                            </div>

                            <div class="module-coupon-link">活动详情 ></div>
                        </div>
                    </div>
                </div>

                <div v-else-if="module.moduleCode == 'ACTIVITY_LIST'">
                    <div class="module-activity">
                        <div v-if="module.moduleContent.activity_list.length == 0" class="module-activity-empty">请选择关联活动</div>
                        <div v-else v-for="(item, j) in module.moduleContent.activity_list" :key="j" class="module-activity-item">
                            <div class="module-activity-head">{{item.activityName}}</div>
                            <div v-if="item.countdown && item.activityState != 1" class="module-activity-countdown flex-center-cross">
                                <div>{{item.countdown.day}}</div>
                                <span>天</span>
                                <div>{{item.countdown.hour}}</div>
                                <span>时</span>
                                <div>{{item.countdown.min}}</div>
                                <span>分</span>
                                <div>{{item.countdown.sec}}</div>
                                <span>秒后{{item.activityState == 2 ? '结束' : '开始'}}</span>
                            </div>
                            <div class="module-activity-main flex-column flex-end-main" :style="{'background-image': 'url(' + item.activityCoverImg + ')'}">
                                <div class="flex-between-end">
                                    <span class="module-activity-limit">亲密值≥{{item.closeValueFloor}} 已解锁</span>
                                    <div class="module-activity-subscribe flex-center" :class="[activityStateClass[item.activityState]]">{{item.activityState == 0 ? '点击订阅' : item.activityState == 2 ? '点击参与' : '活动详情'}}</div>
                                </div>
                                <div v-if="item.activityState != 2" class="module-activity-tag flex-center" :class="[activityStateClass[item.activityState]]">{{item.activityState == 0 ? '活动即将开始' : item.activityState == 1 ? '活动未开始' : '活动已结束'}}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="i > 0" class="module-tool flex-center-cross">
                    <a v-if="i > 1" type="up" @click="sortHandle(i, module, 'up')"><a-icon type="arrow-up" /></a>
                    <a v-if="i < moduleData.length - 1" type="down" @click="sortHandle(i, module, 'down')"><a-icon type="arrow-down" /></a>
                    <button @click="removeHandle(i, module)"><a-icon type="delete" />删除</button>
                </div>
            </div>

            <div v-if="addModule && addModule.indicator !== false" class="module-drag-indicator" :style="{'top': addModule.indicator + 'px'}">
                <div></div>
            </div>
        </div>

        <a-drawer :title="editContent.name" width="500" :visible="!!editContent" @close="editContent = false">
            <div v-if="editContent">
                <a-form-model ref="editForm" :model="editData" layout="horizontal" :rules="editContent.rule">
                    <a-form-model-item v-for="(item, i) in editContent.config" :key="i" :label="item.label" :prop="item.code" :labelCol="editContent.labelCol" :wrapperCol="editContent.wrapperCol">
                        <a-input v-if="item.type == 'input'" v-model.trim="editData[item.code]" />
                        
                        <a-input v-else-if="item.type == 'color'" v-model.trim="editData[item.code]" />
                        
                        <a-select v-else-if="item.type == 'select'" v-model="editData[item.code]" :mode="item.multiple ? 'multiple' : ''">
                            <a-select-option v-for="(option, j) in selectOptions[item.options]" :value="option.id.toString()">{{option.activityName}}</a-select-option>
                        </a-select>

                        <span v-else-if="item.type == 'image'" style="display: inline-block;vertical-align: top; height: 110px;">
                            <JImageUpload
                                :value="editData[item.code]"
                                :uploadParams="uploadParams"
                                :isMove="false"
                                :isMultiple="true"
                                :fileSize="10"
                                :number="1"
                                :accept="'image/*'"
                                @fileChange="uploadHandle($event, item.code)"
                            ></JImageUpload>

                            <a-input v-model="editData[item.code]" style="display: none" />
                        </span>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <a-row :style="{'text-align': 'right'}">
                <a-button @click="saveHandle" type="primary">保存</a-button>
            </a-row>
        </a-drawer>
    </div>
</template>

<script>
    import {notification, message} from 'ant-design-vue'
    import {postAction} from '@/api/manage'
    import JImageUpload from '../components/JImageUpload.vue'
    import moduleEditConfig from '@assets/less20th/module_edit_config.js';
    import global from '@assets/less20th/global.js';
    
    const BASE_URL = '/api/gateway/jic-backend-activity';
    // const BASE_URL = '';
    
    export default {
        components: {
            JImageUpload
        },

        data() {
            return {
                id: this.$route.params.id,

                imageUrl: '',
                moduleList: [],
                moduleIcon: {
                    'IMAGE': '',
                    'COUPON': '',
                    'ACTIVITY_LIST': ''
                },
                addModule: false,

                backgroundConfig: {},
                moduleData: [],
                activityStateClass: {
                    0: 'z-foreshow',
                    1: 'z-wait',
                    2: 'z-start',
                    3: 'z-end'
                },

                selectOptions: {},
                editContent: false,
                editData: {},

                uploadParams: {
                    actionUrl: 'https://jic.jnby.com/activity/market-act/common/upload/multipart',
                    headers: {
                        authorization: 'authorization-text'
                    },
                    uploadHost: 'https://img.bzhz.jnbygroup.com/'
                }
            }
        },

        mounted() {
            postAction(BASE_URL + '/backend/less/module/list').then(res => {
                this.moduleList = res.data;
            });

            postAction(BASE_URL + '/backend/less/theme/detail', {id: this.id}).then(res => {
                if (res.data.background) {
                    this.backgroundConfig = JSON.parse(res.data.background);
                }
            });

            postAction(BASE_URL + '/backend/less/activity/list/all', {themeId: this.id, activityType: 1}).then(res => {
                this.$set(this.selectOptions, 'activity', res.data);
            });

            postAction(BASE_URL + '/backend/less/activity/list/all', {themeId: this.id, activityType: 2}).then(res => {
                this.$set(this.selectOptions, 'couponActivity', res.data);
            });

            this.updateModule();
        },

        methods: {
            updateModule() {
                postAction(BASE_URL + '/backend/less/theme/module/list', {themeId: this.id}).then(res => {
                    this.moduleData = res.data;
                    this.$nextTick(() => {
                        this.moduleData.forEach((module, i) => {
                            if (module.moduleCode == 'ACTIVITY_LIST') {
                                this.activityCountdown(module);
                            }
                        });
                    });
                });
            },

            dragHandle(e, module) {
                if (e.button != 0) return;

                this.addModule = {
                    id: module.id,
                    moduleIcon: module.moduleIcon,
                    moduleName: module.moduleName,
                    moduleCode: module.moduleCode,
                    x: e.clientX,
                    y: e.clientY,
                    indicator: false
                }

                this._dragMoveEvent = e => {
                    this.addModule.x = e.clientX;
                    this.addModule.y = e.clientY;
                };
                this._dragEndEvent = () => {
                    clearTimeout(that.dragTimer);
                    window.removeEventListener('mousemove', this._dragMoveEvent);
                    window.removeEventListener('mouseup', this._dragEndEvent);

                    if (insertIndex !== undefined) {
                        postAction(BASE_URL + '/backend/less/theme/module/add', {
                            themeId: this.id,
                            moduleId: this.addModule.id,
                            moduleContent: moduleEditConfig[this.addModule.moduleCode].data,
                            sort: insertIndex
                        }).then(res => {
                            if (res.success) {
                                this.moduleData.splice(insertIndex, 0, res.data);
                            }
                            this.addModule = false;
                        });
                    } else {
                        this.addModule = false;
                    }
                }
                window.addEventListener('mousemove', this._dragMoveEvent);
                window.addEventListener('mouseup', this._dragEndEvent);

                var that = this;
                var insertTop = false, insertBottom = true;
                var insertIndex;
                !function dragFun() {
                    var client = that.$refs.preview.getBoundingClientRect();
                    var minX = client.left;
                    var maxX = minX + client.width;
                    var minY = client.top < 59 ? 59 : client.top;
                    var maxY = minY + client.height;

                    if (that.addModule.x >= minX && that.addModule.x <= maxX && that.addModule.y >= minY && that.addModule.y <= maxY) {
                        var $module = that.$refs.module;
        
                        if ($module.length == 0) {
                            that.addModule.indicator = 0;
                            insertIndex = 0;
                        } else {
                            for (let i = 0; i < $module.length; i++) {
                                let client = $module[i].getBoundingClientRect();
        
                                if (that.addModule.y < (client.top + client.height/2) && (insertTop || i > 0)) {
                                    insertIndex = i;
                                    that.addModule.indicator = client.top - that.$refs.preview.getBoundingClientRect().top;
                                    break;
                                } else if (insertBottom && i == $module.length - 1) {
                                    insertIndex = $module.length;
                                    that.addModule.indicator = client.top + client.height - that.$refs.preview.getBoundingClientRect().top;
                                }
                            }
                        }
                    } else {
                        insertIndex = undefined;
                        that.addModule.indicator = false;
                    }

                    that.dragTimer = setTimeout(dragFun, 100);
                }();
            },

            sortHandle(index, module, type) {
                postAction(BASE_URL + '/backend/less/theme/module/sort', {
                    themeId: this.id,
                    id: module.id,
                    sort: type == 'up' ? index - 1 : index + 1
                }).then(res => {
                    if (res.success) {
                        this.moduleData.splice(type == 'up' ? index - 1 : index + 1, 0, this.moduleData.splice(index, 1)[0]);
                    }
                });
            },

            removeHandle(index, module) {
                postAction(BASE_URL + '/backend/less/theme/module/remove', {
                    themeId: this.id,
                    id: module.id
                }).then(res => {
                    if (res.success) {
                        this.moduleData.splice(index, 1);
                    }
                });
            },

            editHandle(module) {
                this._editModule = module;

                if (module == 'background') {
                    this.editData = Object.assign({}, this.backgroundConfig);
                    this.editContent = {
                        name: '页面背景',
                        config: [{
                            label: '背景颜色',
                            type: 'input',
                            code: 'bgColor'
                        }],
                        labelCol: {
                            sm: { span: 4 }
                        },
                        wrapperCol: {
                            sm: { span: 20 }
                        }
                    };
                } else {
                    var config = moduleEditConfig[module.moduleCode];
                    var length = 0;
                    config.config.forEach(item => {
                       if (length < item.label.length) {
                           length = item.label.length;
                       }
                    });
                    this.editData = Object.assign({}, module.moduleContent);
                    for (let key in this.editData) {
                        if (key == 'activity_id') {
                            if (this.editData[key]) {
                                this.editData[key] = this.editData[key].toString().split(',');
                            } else {
                                this.editData[key] = [];
                            }
                        }
                    }

                    this.editContent = Object.assign({}, config, {
                        labelCol: {
                            sm: { span: length }
                        },
                        wrapperCol: {
                            sm: { span: 24 - length }
                        }
                    });
                }
            },

            saveHandle() {
                this.$refs.editForm.validate(valid => {
                    if (valid) {
                        if (this._editModule == 'background') {
                            postAction(BASE_URL + '/backend/less/theme/bg/edit', {
                                id: this.id,
                                background: JSON.stringify(this.editData)
                            }).then(res => {
                                if (res.success) {
                                    this.backgroundConfig = this.editData;
                                    this.editContent = false;
                                }
                            });
                        } else {
                            var data = {};
                            for (let key in this.editData) {
                                if (key == 'activity_id' && this.editData[key].join) {
                                    data[key] = this.editData[key].join(',');
                                } else {
                                    data[key] = this.editData[key];
                                }
                            }
                            postAction(BASE_URL + '/backend/less/theme/module/edit', {
                                themeId: this.id,
                                id: this._editModule.id,
                                moduleId: this._editModule.id,
                                moduleContent: data
                            }).then(res => {
                                if (res.success) {
                                    this._editModule.moduleContent = res.data.moduleContent;
                                    if (this._editModule.moduleCode == 'ACTIVITY_LIST') {
                                        this.activityCountdown(this._editModule);
                                    }
                                    this.editContent = false;
                                }
                            });
                        }
                    } else {
                        return false;
                    }
                })
            },

            uploadHandle(list, code) {
                if (list.length) {
                    if (list[0].url) {
                        this.$set(this.editData, code, list[0].url);
                        this.$refs.editForm && this.$refs.editForm.validate(valid => {console.log(valid)});
                    }
                }
            },

            publishHandle() {
                var loadOver = message.loading('发布中...');
                postAction(BASE_URL + '/backend/less/theme/release', {
                    id: this.id
                }).then(res => {
                    loadOver();
                    if (res.success) {
                        notification.success({
                            message: '发布成功',
                            description: '当前活动专题已发布',
                            duration: 4
                        });
                    } else {
                        notification.error({
                            message: '发布失败',
                            description: res.msg,
                            duration: 4
                        });
                    }
                });
            },

            activityCountdown(module) {
                let foreshow = false;
                module.moduleContent.activity_list.forEach((item, j) => {
                    if (!foreshow && item.activityState == 1) {
                        foreshow = true;
                        item.activityState = 0;
                    }
                    if (item.activityStartDate) {
                        global.countdown(item.activityStartDate, data => {
                            this.$set(item, 'countdown', data);
                        }, () => {
                            item.activityState = 2;
                            global.countdown(item.activityEndDate, data => {
                                this.$set(item, 'countdown', data);
                            });
                        }, () => {
                            item.activityState = 3;
                            this.$set(item, 'countdown', false);
                        });
                    }
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '~@assets/less20th/global.less';

    .page-tool {
        width: 375px;
        margin: 0 auto 12px;
    }

    .preview {
        position: relative;
        width: 375px;
        margin: 0 auto 2px;
        background: #fff;
        user-select: none;
    }

    .module {
        &-list {
            position: fixed;
            top: 59px;
            bottom: 0;
            width: 200px;
            background: #fff;
            user-select: none;

            ul {
                padding: 22px 14px;
                overflow: hidden;

                li {
                    float: left;
                    position: relative;
                    width: 80px;
                    height: 80px;
                    font-size: 12px;
                    color: #333;
                    cursor: pointer;

                    &:after {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                    }

                    &:nth-child(even) {
                        margin-left: 12px;
                    }

                    &:hover {
                        background: #F5F5F5;
                    }

                    img {
                        width: 30px;
                        height: 30px;
                        margin-bottom: 12px;
                    }
                }
            }
        }

        &-drag {
            box-sizing: border-box;
            z-index: 999;
            position: fixed;
            width: 80px;
            height: 80px;
            border: 1px dashed #737a7e;
            overflow: hidden;
            font-size: 12px;
            color: #333;
            background: #e0e7eb;
            opacity: .6;
            cursor: move;
            transform: translate(-50%,-50%);

            &:after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
            }

            img {
                width: 30px;
                height: 30px;
                margin-bottom: 12px;
            }

            &-indicator {
                z-index: 1;
                position: absolute;
                left: 0;
                width: 100%;

                &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: -1px;
                    width: 100%;
                    height: 2px;
                    border: none;
                    background: #12a80e;
                }

                div {
                    position: absolute;
                    left: 0;
                    top: 0;
                    padding: 0 8px;
                    line-height: 24px;
                    font-size: 12px;
                    color: #fff;
                    background: #12a80e;
                    transform: translate(0,-50%);

                    &:before {
                        content: '松开鼠标，控件将放置在这里';
                    }
                    &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        right: -24px;
                        top: 0;
                        border: 12px solid rgba(0,0,0,0);
                        border-left-color: #12a80e;
                    }
                }
            }
        }

        &-box {
            position: relative;
            cursor: pointer;

            &:hover {
                z-index: 1;
                outline: 2px dashed #f00;

                &:before {
                    content: '';
                    z-index: 1;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(154,190,208,.7);
                }

                &:after {
                    content: '双击编辑内容';
                    z-index: 1;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    width: 100%;
                    font-size: 15px;
                    text-align: center;
                    color: #fff;
                    transform: translate(0,-50%);
                }

                .module-tool {
                    display: block;
                }
            }
        }

        &-tool {
            display: none;
        	z-index: 9;
        	position: absolute;
        	right: 0;
        	top: 0;
        	right: 0;
        	height: 30px;
        	padding: 5px;

            a {
                display: inline-block;
                vertical-align: middle;
                width: 20px;
                height: 24px;
                margin-right: 6px;
                line-height: 24px;
                font-size: 14px;
                color: #444;
                text-align: center;
            }

            button {
                min-width: 10px;
                height: 26px;
                padding: 0 5px;
                border: 1px solid #303030;
                border-radius: 2px;
                margin-left: 6px;
                font-size: 12px;
                color: #fff;
                background: #464847;
                vertical-align: middle;
                cursor: pointer;

                &:hover {
                    opacity: .9;
                }

                i {
                    margin-right: 5px;
                }
            }
        }

        &-banner {
            box-sizing: border-box;
            height: 300px;
            padding: 84px 15px 0;
            margin-bottom: 15px;
            overflow: hidden;
            color: #1B1B1B;
            background-image: url('https://picttype1.jnby.com/less20th/banner.png');
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-position: 0 -6px;

            &-title {
                line-height: 28px;
                font-size: 24px;
                font-weight: bold;

                p {
                    margin: 5px 0 0;
                }
            }

            &-rule {
                width: 64px;
                height: 24px;
                border-radius: 3px;
                margin-top: 96px;
                font-size: 12px;
                color: #666;
                background: rgba(27,27,27,.1);
            }

            &-account {
                position: relative;
                width: 268px;
                height: 68px;
                border-radius: 10px;
                padding: 0 15px;
                margin-top: 10px;
                color: #fff;
                backdrop-filter: blur(10px);
                
                &-background {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    border: 1px solid rgba(255,255,255,.2);
                    border-radius: 10px;
                    background-color: #6F783E;
                    opacity: .4;
                }
                
                &-title {
                    line-height: 20px;
                    font-size: 12px;
                }

                &-value {
                    line-height: 28px;
                    font-size: 26px;
                }

                &-value img {
                    width: 12px;
                    height: 12px;
                    margin-left: 3px;
                    margin-bottom: 4px;
                }

                &-link {
                    margin-top: 21px;
                    font-size: 12px;
                }
            }
        }

        &-image {
            font-size: 0;

            img {
                width: 375px;
            }
        }

        &-coupon {
            border-radius: 10px;
            margin: 0 15px 15px;
            background: #969F63;

            &-empty {
                line-height: 188px;
                text-align: center;
                color: #fff;
            }

            &-head {
                padding: 10px 16px 10px 14px;
            }

            &-limit {
                font-size: 12px;
                color: #fff;

                span:nth-child(2) {
                    margin-left: 1em;
                }
            }

            &-draw {
                width: 84px;
                height: 32px;
                border-radius: 3px;
                font-size: 12px;
                color: #969F63;
                background: #fff;
            }

            &-main {
                height: 80px;
            }

            &-item {
                height: 80px;
                padding: 0 5px;
                margin: 0 15px;
                text-align: center;
                background-image: url('https://picttype1.jnby.com/less20th/coupon.png');
                background-size: 100%;

                &:nth-child(n+2) {
                    display: none;
                }

                &-text {
                    line-height: 20px;
                    font-size: 12px;
                    color: rgba(255,255,255,.8);
                }
                &-limit {
                    padding: 0 20px;
                    line-height: 24px;
                    font-size: 16px;
                    color: #fff;
                }
                &-sum {
                    width: 111px;
                    font-size: 12px;
                    text-align: center;
                    color: #D5BC85;
                }
                &-sum span {
                    font-size: 40px;
                }
            }

            &-nav {
                height: 26px;

                &-item {
                    width: 6px;
                    height: 6px;
                    border-radius: 100%;
                    margin: 0 5px;
                    background: rgba(255,255,255,.4);

                    &.z-crt {
                        background: #D5BC85;
                    }
                }
            }

            &-link {
                border-top: 1px solid rgba(255,255,255,.2);
                margin: 0 15px;
                line-height: 29px;
                font-size: 12px;
                text-align: center;
                color: #fff;
            }
        }

        &-activity {
            margin-top: 12px;
            overflow: hidden;

            &-empty {
                line-height: 100px;
                text-align: center;
            }

            &-item {
                margin: 0 15px 15px;
            }

            &-head {
                padding-top: 8px;
                margin-bottom: 10px;
                line-height: 26px;
                font-size: 18px;
                font-weight: bold;
                color: #333;
                background-image: url('https://picttype1.jnby.com/less20th/20th.png');
                background-repeat: no-repeat;
                background-size: 160px 25px;
            }

            &-countdown {
                margin-bottom: 10px;

                div {
                    box-sizing: border-box;
                    min-width: 18px;
                    height: 18px;
                    border-radius: 3px;
                    padding: 0 3px;
                    line-height: 18px;
                    font-size: 12px;
                    text-align: center;
                    color: #fff;
                    background: #969F63;
                }
                span {
                    margin: 0 3px;
                    font-size: 12px;
                    color: #666;
                }
            }

            &-main {
                position: relative;
                box-sizing: border-box;
                height: 141px;
                border-radius: 10px;
                padding: 25px 15px 15px;
                overflow: hidden;
                color: #fff;
                background-size: 100%;
            }

            &-title {
                line-height: 20px;
                font-size: 12px;
            }

            &-name {
                display: inline-block;
                position: relative;
                line-height: 28px;
                font-size: 20px;

                &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 10px;
                    height: 12px;
                    background: linear-gradient(90deg, rgba(150,159,99,0) 0%, #969F63 46%, rgba(150,159,99,0) 100%);
                }

                span {
                    position: relative;
                }
            }

            &-limit {
                line-height: 20px;
                font-size: 12px;
            }

            &-subscribe {
                box-sizing: border-box;
                width: 108px;
                height: 32px;
                border-style: solid;
                border-width: 1px;
                border-radius: 3px;
                font-size: 12px;

                &.z-wait,
                &.z-end {
                    border-color: #fff;
                }
                &.z-foreshow {
                    border-color: #327542;
                    background: #327542;
                }
                &.z-start {
                    border-color: #969F63;
                    background: #969F63;
                }
            }

            &-tag {
                position: absolute;
                right: 0;
                top: 15px;
                width: 80px;
                height: 24px;
                border-radius: 3px 0 0 3px;
                font-size: 12px;

                &.z-wait {
                    color: #fff;
                    background: #8F8E7E;
                }
                &.z-foreshow {
                    color: #327542;
                    background: rgba(3,39,84,.2);
                }
                &.z-end {
                    color: #fff;
                    background: #CDCDCD;
                }
            }
    }
    }
</style>
